<template>
	<view class="carousel-manage">
		<!-- 顶部操作栏 -->
		<view class="action-bar">
			<button type="primary" @click="handleAdd">新增轮播图</button>
		</view>

		<!-- 轮播图列表 -->
		<view class="carousel-list">
			<uni-card v-for="item in carouselList" :key="item.id" :title="item.title">
				<view class="carousel-item">
					<image :src="item.image_url" mode="aspectFill" class="carousel-image" />
					<view class="item-info">
						<view class="info-item">
							<text class="label">链接:</text>
							<text>{{item.link || '无'}}</text>
						</view>
						<view class="info-item">
							<text class="label">排序:</text>
							<text>{{item.sort_order}}</text>
						</view>
					</view>
				</view>

				<!-- 操作按钮 -->
				<template v-slot:actions>
					<view class="actions">
						<button size="mini" @click="handleEdit(item)">编辑</button>
						<button size="mini" type="warn" @click="handleDelete(item)">删除</button>
					</view>
				</template>
			</uni-card>
		</view>

		<!-- 编辑/新增弹窗 -->
		<uni-popup ref="formPopup" type="dialog">
			<view class="form-popup">
				<view class="popup-title">{{editForm.id ? '编辑轮播图' : '新增轮播图'}}</view>
				<view class="form-content">
					<uni-forms ref="form" :modelValue="editForm" :rules="rules">
						<uni-forms-item label="标题" required>
							<uni-easyinput v-model="editForm.title" placeholder="请输入标题" />
						</uni-forms-item>
						<uni-forms-item label="图片" required>
							<uni-file-picker :value="fileList" fileMediatype="image" mode="grid"
								@select="handleImageSelect" ref="filePicker" />
						</uni-forms-item>
						<uni-forms-item label="链接">
							<uni-easyinput v-model="editForm.link" placeholder="请输入链接" />
						</uni-forms-item>
						<uni-forms-item label="排序">
							<uni-easyinput v-model="editForm.sort_order" type="number" placeholder="请输入排序号" />
						</uni-forms-item>
					</uni-forms>
				</view>
				<view class="popup-buttons">
					<button @click="$refs.formPopup.close()">取消</button>
					<button type="primary" @click="handleSubmit">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import request from '@/utils/request.js'

	export default {
		data() {
			return {
				carouselList: [],
				fileList: [],
				editForm: {
					id: null,
					title: '',
					image_url: '',
					link: '',
					sort_order: 0
				},
				rules: {
					title: {
						rules: [{
							required: true,
							errorMessage: '请输入标题'
						}]
					},
					image_url: {
						rules: [{
							required: true,
							errorMessage: '请上传图片'
						}]
					}
				}
			}
		},

		onLoad() {
			this.getCarouselList()
		},

		methods: {
			// 获取轮播图列表
			async getCarouselList() {
				try {
					const res = await request({
						url: '/carousel',
						method: 'GET'
					})
					console.log(res);
					if (res.data.status === 'success') {
						this.carouselList = res.data.data.items
					}
				} catch (e) {
					console.error('获取轮播图列表失败:', e)
				}
			},

			// 新增轮播图
			handleAdd() {
				this.editForm = {
					id: null,
					title: '',
					image_url: '',
					link: '',
					sort_order: 0
				}
				this.fileList = []
				this.$refs.formPopup.open()
			},

			// 编辑轮播图
			handleEdit(item) {
				this.editForm = {
					...item
				}
				this.fileList = item.image_url ? [{
					url: item.image_url,
					name: 'carousel_image',
					type: 'image'
				}] : []
				this.$refs.formPopup.open()
			},

			// 删除轮播图
			handleDelete(item) {
				uni.showModal({
					title: '确认删除',
					content: `确定要删除轮播图 ${item.title} 吗？`,
					success: async (res) => {
						if (res.confirm) {
							try {
								const res = await request({
									url: `/carousel/${item.id}`,
									method: 'DELETE'
								})
								if (res.data.status === 'success') {
									uni.showToast({
										title: '删除成功'
									})
									this.getCarouselList()
								}
							} catch (e) {
								uni.showToast({
									title: '删除失败',
									icon: 'none'
								})
							}
						}
					}
				})
			},

			// 图片选择回调
			async handleImageSelect(e) {
				const tempFilePath = e.tempFilePaths[0]
				try {
					const uploadRes = await request({
						url: '/upload',
						method: 'POST',
						data: {
							file: tempFilePath,
							type: 'image'
						},
					})

					if (uploadRes.data.status === 'success') {
						const {
							url
						} = uploadRes.data.data
						this.editForm.image_url = url
						this.fileList = [{
							url: url,
							name: 'uploaded_image',
							type: 'image'
						}]
						this.$refs.form.validateField('image_url')
					}
				} catch (e) {
					uni.showToast({
						title: '图片上传失败',
						icon: 'none'
					})
				}
			},

			// 提交表单
			async handleSubmit() {
				try {
					await this.$refs.form.validate()
				} catch (e) {
					return
				}

				try {
					const url = this.editForm.id ?
						`/carousel/${this.editForm.id}` :
						'/carousel'
					const method = this.editForm.id ? 'PUT' : 'POST'

					const submitData = {
						title: this.editForm.title,
						image_url: this.editForm.image_url,
						link: this.editForm.link || '',
						sort_order: this.editForm.sort_order || 0
					}

					const res = await request({
						url,
						method,
						data: submitData
					})

					if (res.data.status === 'success') {
						uni.showToast({
							title: '保存成功'
						})
						this.$refs.formPopup.close()
						this.getCarouselList()
					}
				} catch (e) {
					uni.showToast({
						title: '保存失败',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.carousel-manage {
		padding: 20rpx;

		.action-bar {
			margin-bottom: 20rpx;
		}

		.carousel-list {
			.carousel-item {
				display: flex;

				.carousel-image {
					width: 300rpx;
					height: 160rpx;
					margin-right: 20rpx;
					border-radius: 8rpx;
				}

				.item-info {
					flex: 1;

					.info-item {
						display: flex;
						margin-bottom: 10rpx;

						.label {
							width: 100rpx;
							color: #666;
						}
					}
				}
			}

			.actions {
				display: flex;
				gap: 20rpx;

				button {
					margin: 0;
				}
			}
		}

		.form-popup {
			background: #fff;
			border-radius: 10rpx;
			padding: 30rpx;

			.popup-title {
				font-size: 32rpx;
				font-weight: bold;
				text-align: center;
				margin-bottom: 30rpx;
			}

			.form-content {
				max-height: 60vh;
				overflow-y: auto;
			}

			.popup-buttons {
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;

				button {
					width: 45%;
				}
			}
		}
	}
</style>